<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose defaultFullscreen :title="title">
     <a-button type="link" v-for="item in getFileUrlList(fileUrl,true)" @click="downloadFile(item.url)">{{item.name}}</a-button>
    <a-divider>预览</a-divider>
     <vue-office-docx v-if="getFileType(fileUrl)=='docx'"
                     :src="fileUrl"
                     style="height: 600px"
                     @rendered="renderedHandler"
                     @error="errorHandler"></vue-office-docx>
    <vue-office-excel v-else-if="getFileType(fileUrl)=='xlsx'"
                      :src="fileUrl"
                      :options="{xls:false,minColLength:0,minRowLength:0,widthOffset:10,heightOffset:10}"
                      style="height: 600px"
                      @rendered="renderedHandler"
                      @error="errorHandler"></vue-office-excel>
    <vue-office-excel v-else-if="getFileType(fileUrl)=='xls'"
                      :src="fileUrl"
                      :options="{xls:true,minColLength:0,minRowLength:0,widthOffset:10,heightOffset:10}"
                      style="height: 600px"
                      @rendered="renderedHandler"
                      @error="errorHandler"></vue-office-excel>
    <vue-office-pdf v-else-if="getFileType(fileUrl)=='pdf'"
                    :src="fileUrl"
                    @rendered="renderedHandler"
                    @error="errorHandler"></vue-office-pdf>
    <img v-else-if="['jpg','png','jpeg'].includes(getFileType(fileUrl))" :src="fileUrl" style="width: 300px; height: 300px; display: block; margin: 0 auto" alt="图片"/>

  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import VueOfficeDocx from "@vue-office/docx";
    import '@vue-office/docx/lib/index.css'
    import VueOfficeExcel from "@vue-office/excel";
    import '@vue-office/excel/lib/index.css'
    import VueOfficePdf from "@vue-office/pdf";
    import {getFileType, getFileUrlList} from "@/utils";
    import {downloadFile} from "@/utils/common/renderUtils";
    import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    const fileUrl = ref('')

    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        setModalProps({confirmLoading: false,showCancelBtn:true,showOkBtn:false,cancelText:'关闭'});
        fileUrl.value = getFileAccessHttpUrl(data.fileUrl)

    });
    //设置标题
    const title = computed(() => ('文件查看'));
    function renderedHandler(data){

    }

   function errorHandler(err){

   }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>
